<template>
  <view class="mine-container" :class="{'refreshing': refreshing}" :style="{height: `${windowHeight}px`}">
    <!--状态栏-->
    <view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>

    <!--顶部个人信息栏-->
    <view class="header-section">
      <view class="user-profile">
        <view class="avatar-section">
          <view v-if="!avatar" class="cu-avatar xl round bg-white avatar-wrapper">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round avatar-wrapper"
                 mode="widthFix">
          </image>
        </view>
        <view class="user-data">
          <view v-if="!hasLogin" @click="handleToLogin" class="login-tip">
            点击登录
          </view>
          <view v-if="hasLogin" @click="handleToInfo" class="user-info">
            <text class="u_title text-ellipsis">{{ useUserStore().nickName }}</text>
            <text class="u_phone text-ellipsis">手机号: {{ useUserStore().phonenumber || '18728478236' }}</text>
          </view>
        </view>
        <view @click="handleToInfo" class="info-button">
          <text>个人信息</text>
          <text class="arrow-right"></text>
        </view>
      </view>
    </view>

    <!--内容区域-->
    <view class="content-section">
      <!-- 订单区域 -->
      <view class="order-content animated">
        <view class="order-title">
          <text>我的订单</text>
          <view @click="handleToOrder('-1')" class="all-order">
            <text>全部</text>
            <text class="arrow-right"></text>
          </view>
        </view>
        <view class="order-actions">
          <view @click="handleToOrder('0')">
            <view class="order-icon unpaid-icon">
              <image src="@/static/images/mine/svg/unpaid.svg" mode="aspectFit"></image>
            </view>
            <text>待下单</text>
            <text v-if="orderCount.waitingPayCount > 0" class="count-badge">{{orderCount.waitingPayCount}}</text>
          </view>
          <view @click="handleToOrder('1')">
            <view class="order-icon unship-icon">
              <image src="@/static/images/mine/svg/unship.svg" mode="aspectFit"></image>
            </view>
            <text>待发货</text>
            <text v-if="orderCount.waitingDeliveryCount > 0" class="count-badge">{{orderCount.waitingDeliveryCount}}</text>
          </view>
          <view @click="handleToOrder('2')">
            <view class="order-icon unreceive-icon">
              <image src="@/static/images/mine/svg/unreceive.svg" mode="aspectFit"></image>
            </view>
            <text>待收货</text>
            <text v-if="orderCount.waitingReceiveCount > 0" class="count-badge">{{orderCount.waitingReceiveCount}}</text>
          </view>
          <view @click="handleToOrder('4')">
            <view class="order-icon refund-icon">
              <image src="@/static/images/mine/svg/refund.svg" mode="aspectFit"></image>
            </view>
            <text>退款/售后</text>
            <text v-if="orderCount.refundCount > 0" class="count-badge">{{orderCount.refundCount}}</text>
          </view>
        </view>
      </view>

      <!-- 功能区域 - 改为2x4网格，使用SVG图标 -->
      <view class="function-grid animated">
        <view class="grid-row">
          <view class="grid-item" @click="handleToAddress">
            <view class="grid-icon location-icon">
              <image src="@/static/images/mine/svg/location.svg" mode="aspectFit"></image>
            </view>
            <text class="grid-text">收货地址</text>
          </view>
          <view class="grid-item" @click="handleToEditInfo">
            <view class="grid-icon edit-icon">
              <image src="@/static/images/mine/svg/edit.svg" mode="aspectFit"></image>
            </view>
            <text class="grid-text">编辑资料</text>
          </view>
          <view class="grid-item" @click="handleToSetting">
            <view class="grid-icon settings-icon">
              <image src="@/static/images/mine/svg/settings.svg" mode="aspectFit"></image>
            </view>
            <text class="grid-text">应用设置</text>
          </view>
          <view class="grid-item" @click="handleBuilding">
            <view class="grid-icon help-icon">
              <image src="@/static/images/mine/svg/help.svg" mode="aspectFit"></image>
            </view>
            <text class="grid-text">常见问题</text>
          </view>
        </view>
        <view class="grid-row">
          <view class="grid-item" @click="handleAbout">
            <view class="grid-icon about-icon">
              <image src="@/static/images/mine/svg/about.svg" mode="aspectFit"></image>
            </view>
            <text class="grid-text">关于我们</text>
          </view>
          <view class="grid-item" @click="handleBuilding">
            <view class="grid-icon chat-icon">
              <image src="@/static/images/mine/svg/chat.svg" mode="aspectFit"></image>
            </view>
            <text class="grid-text">交流群</text>
          </view>
          <view class="grid-item" @click="handleBuilding">
            <view class="grid-icon service-icon">
              <image src="@/static/images/mine/svg/service.svg" mode="aspectFit"></image>
            </view>
            <text class="grid-text">联系客服</text>
          </view>
          <view class="grid-item" @click="handleLogout">
            <view class="grid-icon logout-icon">
              <image src="@/static/images/mine/svg/logout.svg" mode="aspectFit"></image>
            </view>
            <text class="grid-text">退出登录</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 添加自定义Tabbar组件 -->
    <custom-tabbar />
  </view>
</template>

<script setup>
import useUserStore from '@/store/modules/user'
import {computed, getCurrentInstance, ref} from "vue";
import {onLoad, onPullDownRefresh, onShow} from '@dcloudio/uni-app';
import {getOrderCount} from "@/api/sell/sellOrderDetail";
import {getToken} from "@/utils/auth";
import CustomTabbar from '@/components/custom-tabbar/index.vue';

const {proxy} = getCurrentInstance();

const hasLogin = computed(() => getToken());
const avatar = computed(() => useUserStore().avatar);
const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight || 0);
const refreshing = ref(false);

function handleToInfo() {
  if (!hasLogin.value) {
    proxy.$confirmDialog.confirm('用户未登录，立即登录？').then(() => {
      uni.navigateTo({
        url: '/pages/login'
      });
    })
    return;
  }
  uni.navigateTo({
    url: '/pages_mine/pages/info/index'
  });
};

function handleToOrder(status) {
  if (!hasLogin.value) {
    proxy.$confirmDialog.confirm('用户未登录，立即登录？').then(() => {
      uni.navigateTo({
        url: '/pages/login'
      });
    })
    return;
  }
  const statusParam = status !== undefined ? `?status=${status}` : '';
  uni.navigateTo({
    url: `/pages/sellment/order/order${statusParam}`
  });
}

function handleToAddress() {
  if (!hasLogin.value) {
    proxy.$confirmDialog.confirm('用户未登录，立即登录？').then(() => {
      uni.navigateTo({
        url: '/pages/login'
      });
    })
    return;
  }
  uni.navigateTo({
    url: '/pages/sellment/address/address'
  });
}

function handleToEditInfo() {
  if (!hasLogin.value) {
    proxy.$confirmDialog.confirm('用户未登录，立即登录？').then(() => {
      uni.navigateTo({
        url: '/pages/login'
      });
    })
    return;
  }
  uni.navigateTo({
    url: '/pages_mine/pages/info/edit'
  });
};

function handleToSetting() {
  if (!hasLogin.value) {
    proxy.$confirmDialog.confirm('用户未登录，立即登录？').then(() => {
      uni.navigateTo({
        url: '/pages/login'
      });
    })
    return;
  }
  uni.navigateTo({
    url: '/pages_mine/pages/setting/index'
  });
};

function handleToLogin() {
  uni.reLaunch({
    url: '/pages/login'
  });
};

function handleToAvatar() {
  uni.navigateTo({
    url: '/pages_mine/pages/avatar/index'
  });
};

function handleLogout() {
  // 使用新的确认弹窗组件
  proxy.$confirmDialog.confirm('确认退出登录吗？')
    .then(() => {
      useUserStore().logOut().then(() => {
        uni.reLaunch({
          url: '/pages/login'
        });
      });
    })
    .catch(() => {
      // 用户取消操作，不做任何处理
    });
};

function handleHelp() {
  uni.navigateTo({
    url: '/pages_mine/pages/help/index'
  });
};

function handleAbout() {
  uni.navigateTo({
    url: '/pages_mine/pages/about/index'
  });
};

function handleJiaoLiuQun() {
  uni.showToast({
    title: 'QQ群：133713780',
    mask: false,
    icon: "none",
    duration: 1000
  });
};

function handleBuilding() {
  uni.showToast({
    title: '模块建设中~',
    mask: false,
    icon: "none",
    duration: 1000
  });
}

const orderCount = ref({
  waitingPayCount: 0,
  waitingDeliveryCount: 0,
  waitingReceiveCount: 0,
  waitingCommentCount: 0,
  refundCount: 0,
})
function orderStatistics() {
  if (!hasLogin.value) {
    return;
  }
  getOrderCount().then(res => {
    orderCount.value = res.data;
  })
}

onShow(async () => {
  if (hasLogin.value) {
    await useUserStore().getInfo();
  }
  orderStatistics()
})

onPullDownRefresh(() => {
  refreshing.value = true;

  // 刷新数据
  useUserStore().getInfo();
  orderStatistics();

  // 停止刷新动画
  setTimeout(() => {
    refreshing.value = false;
  uni.stopPullDownRefresh();
  }, 500);
})
</script>

<style lang="scss" scoped>
@import "@/static/scss/index.scss";

page {
  background-color: #f5f6f7;
}

/* 添加动画关键帧 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 文本溢出样式 */
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  width: 100%;
}

/* 引入图标字体 */
@font-face {
  font-family: "iconfont";
  src: url('https://at.alicdn.com/t/font_1078604_w4kpxh0rafi.ttf') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mine-container {
  width: 100%;
  height: 100%;
  padding-bottom: 100rpx;

  .status-bar {
    width: 100%;
    background: linear-gradient(135deg, #e84d1c, #f06e44);
  }

  .header-section {
    padding: 25px 15px 60px 15px;
    background: linear-gradient(135deg, #e84d1c, #f06e44);
    color: white;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    box-shadow: 0 5px 20px rgba(232, 77, 28, 0.2);
    position: relative;
    overflow: hidden;
    animation: fadeIn 0.5s ease-out;

    /* 装饰元素 */
    &::after {
      content: '';
      position: absolute;
      width: 150px;
      height: 150px;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      bottom: -80px;
      right: -50px;
    }

    .page-title {
      font-size: 36rpx;
      font-weight: 500;
      margin-bottom: 20rpx;
    }

    .user-profile {
      display: flex;
      width: 100%;
      padding: 20rpx 30rpx;
      align-items: center;
      justify-content: space-between;

      .avatar-section {
        margin-right: 24rpx;
        animation: fadeIn 0.5s ease-out;
      }

      .user-data {
        flex: 1;
        padding-right: 30rpx;
        min-width: 0; /* 关键：让子元素可以正确应用溢出属性 */
        animation: fadeIn 0.5s ease-out;
      }

      .avatar-wrapper {
        width: 120rpx !important;
        height: 120rpx !important;
        border: 2px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
      }

      .login-tip {
        font-size: 36rpx;
        font-weight: 500;
        color: #ffffff;
      }

      .user-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
      }

      .u_title {
        font-size: 32rpx;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 10rpx;
        display: block;
        width: 100%;
      }

      .u_phone {
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.9);
        display: block;
        width: 100%;
      }

      .info-button {
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 36rpx;
        padding: 12rpx 24rpx;
        color: #fff;
        font-size: 24rpx;
        animation: fadeIn 0.5s ease-out;
      }

      .info-button .arrow-right {
        margin-left: 10rpx;
      }

      .info-button .arrow-right:after {
        color: #fff;
      }
    }
  }

  .content-section {
    position: relative;
    top: -40px;
    padding: 0 15px;
    padding-bottom: 120rpx;

    .order-content {
      padding: 15px 0;
      border-radius: 12px;
      background-color: white;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      animation: fadeIn 0.5s ease-out;

      .order-title {
        padding: 0 15px 12px 15px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        text {
          font-size: 16px;
          font-weight: 500;
          color: #333;
        }

        .all-order {
          display: flex;
          align-items: center;
          font-weight: normal;
          color: #999;
          font-size: 14px;

          .arrow-right:after {
            content: '›';
            font-size: 18px;
            margin-left: 2px;
          }
        }
      }

      .order-actions {
        margin-top: 15px;
        display: flex;
        justify-content: space-around;
        padding: 0 10px 5px;

        view {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          transition: transform 0.2s ease;
          animation: slideUp 0.5s ease-out;
          animation-delay: calc(0.05s * var(--i, 0));
          opacity: 0;
          animation-fill-mode: forwards;

          &:nth-child(1) { --i: 1; }
          &:nth-child(2) { --i: 2; }
          &:nth-child(3) { --i: 3; }
          &:nth-child(4) { --i: 4; }
          &:nth-child(5) { --i: 5; }

          &:active {
            transform: scale(0.95);
          }

          .order-icon {
            width: 28px;
            height: 28px;
            margin-bottom: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          text {
            font-size: 12px;
            color: #666;
          }

          .count-badge {
            position: absolute;
            top: -8px;
            right: -5px;
            background-color: #e84d1c;
            color: white;
            font-size: 10px;
            width: 16px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            border-radius: 50%;
          }
        }
      }
    }

    /* 新的功能网格 */
    .function-grid {
      margin-top: 15px;
      border-radius: 12px;
      background-color: white;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      animation: fadeIn 0.5s ease-out;
      animation-delay: 0.1s;
      opacity: 0;
      animation-fill-mode: forwards;

      .grid-row {
        display: flex;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }
      }

      .grid-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 15px 0;
        border-right: 1px solid #f5f5f5;
        transition: transform 0.2s ease;
        animation: slideUp 0.5s ease-out;
        animation-delay: calc(0.05s * var(--i, 0));
        opacity: 0;
        animation-fill-mode: forwards;

        &:nth-child(1) { --i: 1; }
        &:nth-child(2) { --i: 2; }
        &:nth-child(3) { --i: 3; }
        &:nth-child(4) { --i: 4; }

        &:last-child {
          border-right: none;
        }

        &:active {
          transform: scale(0.95);
          background-color: #f9f9f9;
        }
      }

      .grid-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 8px;
      }

      .grid-text {
        font-size: 12px;
        color: #666;
      }
    }
  }
}

/* 订单图标默认风格 */
.order-actions {
  image {
    height: 28px !important;
    width: 28px !important;
    font-size: 0; /* 解决部分环境下显示问题 */
  }
}

/* 设置所有右箭头统一样式 */
.arrow-right:after {
  content: '\e606';
  font-family: "iconfont" !important;
  font-size: 16px;
  color: #999;
  margin-left: 5px;
  line-height: 1;
}

/* 图标样式修改 */
.order-icon image, .grid-icon image {
  width: 100%;
  height: 100%;
  display: block;
}

/* 引入必要的图标字体 */
@font-face {
  font-family: 'iconfont';
  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVUAAsAAAAAChAAAAUHAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDSAqHSIYdATYCJAMYCw4ABCAFhG0HYRs5CVGUTk6Q7IsD3raUBEEQVGH9OzS0ozAaG5a84+HfY+532ZmBTQogAVCgoAUHxRMU04rCOoVCpQIVFeqrwq9Q/pXL77dzbR6gACSwmP8cM13aPA/sfptIJJrke1M7JBKJ0EgkQiJkQso7YtaZnBzGaKgtXJ6BABBoQg8kISHpBDAoMdYJADJq+JA8MCodpYQTGARXFZQDsgEWcExL1AMAq72/J19AwgAYWBHYO6WHLB+E/Iz9mcvMln+zhQbA8XQBwHYQQAHoAUARVAp3j4ZD7NE5ocT7LEwGAAxgYPBf/jPXz9Z+5vrf/H9fDcaVYcq7tBZwYFD8Lw9AARZgMGTgQAAuCCWP8DOWUuFnbgWD4GcbCAgSk8QyxdgDcwjILwBZBogWP05TpLUeUwfOHtYnuEJXHnbtolsP7d/QL+z3bZm0eGvQiRM+p0/7njrlM2mSbcuWgDRuWGNLyLD5nYKmLmgVfGxzpHfKJiGrwZrugfv71q7dZwvf1dh/zqrZ00IWh2xvuDh4V1i/pj4792zxX3jQe96Bxj5zD6jcKX27L++7Y37/eWGT5/ufOdXAb+hCT88pky10+4H+4UGHGkQcOFjfOcC9hQeO+0WEL2kQsvdA+KKGlmrhiY5N5vXbu2fS5L4TFk6wWxct6bd/b7RkOXh1qKXLl6rddWX0sHm+4fP9d1y2h8+5Ith81Z8K10+ZENjPnbZtUyjhW9pWU1AjWLNgzUJNnLbNoqiNDdWB1HKwYu0Sp4fvbOAxdGEDv/CDB/1XzG4TNW1Vm+gRMcOPrvEYstzH36+ux9LlQW4NVIZVq4Lc6z+06G05GDxjZtjseQsi5/aLXNG3wfK5/cKPrjYvXWH3W3IoMHx+g917Lfk83z/UvNJtWDCl3kJlSKZnJeVKWFxcsxgG4dpYXLk8ZaZppiQjw7pykjl3RWp7VgaFQadTUIlgZdB9s47wAQj9C0S/baBJoUlc/XrjmNGjY8b9JeJ33xnf8aMp9aPZb8UF4Q0bwoOI+RHHVkREHIs46v6qW4CIxU//BZBvn/i/R6p+5/8H7h9qZSvVLpGDPh3bkOJJnT9MLDA5Euc/nnxzf+blF2VaSTpFFUXr/6iIaXPwLxgaMl17RRnOaBJScGXYuzA0bHKXMaP72t2j0pVNNDHuU7RLaWnqxEkTJ02a1Db7eGRk29RJ+cXKuPLtYc6R5VqXiKaW1a1+9xsbCpvvP3/e2CmLUkpPX9yQn2Bsw9M1D58+XGM3x15j1RkbM3vdvJHZmHnzxu7jxhNXX9d4I6nxGnHTj0Q+b+jY0VNbZP7Ahy/f89/MYj0dvvnyM/8Nb8NWMxGO7A0AQNJ7v8j/IdnPGlJ8KH6V6o3LLM+5yU8vkQBAfWs3gA9Aqx+o2S6zcGpptpg7Nhe9PmwBQBbMfM9Cp/yc+QQTSDAwTcQ2AYUBHZAxgAOh6PRAHNAXsOhm5bFBAkUBdNKKAA57DTDoOAIM9roiip5DhYt3qLDPgMTdo7GxxYytBCmpMaK+ICkVZNMbLaNclLpBfE+jvJc1P7dKeZpGuWl9vswkVSYjqUFWz0Pl3LXWOSXKnNQ4MUQ+QjJRiurUC8rKCXLx0hhlGi8nHPZVNomPl2Tq0qXaE4rikBoDIZ+AiKQENNNraBLKCqVZ34/N58lUnqxRnWE1E29Gx5g0mnInRU0gU+8TSuOsZl0tShFzJGk4YRApPkQkFZSKUqJD5MQWyLuWGkNR0+wEBxP1eoo0Xc2KXL8l/p5bABA6j4yCJGRACU5wgaT3lUPSZHPPPVFqkL0LKlGa5KypdpWLHAAA') format('woff2');
}

@import "@/static/scss/global.scss";

/* 下拉刷新动画 */
@keyframes refreshAnim {
  0% { transform: translateY(0); }
  50% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}

.refreshing {
  animation: refreshAnim 0.3s ease-out;
}
</style>
